<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
**********简单选择器**************
        1.通用选择器 *{}
        2.标签选择器 标签名
        3.类选择器 calss
        4.id选择器 id
        5.伪类选择器 
        伪类:用来描述一个元素的特殊状态 (不存在的类,特殊的类)
        第几个子元素,被点击的元素....
        伪类以:开头
        :first-child 第一个子元素
        :last-child 最后一个子元素
        :nth-child() 第n个子元素  特殊值:n 全部子元素 2n/even 偶数个子元素 2n+1/odd 奇数个子元素   
        上述都是按照子元素排序
        :first-of-type 同类型的第一个子元素 
        :last-of-type  同类型的最后一个子元素
        :nth-of-type() 同类型的第n个子元素  特殊值:n 全部子元素 2n/even 偶数个子元素 2n+1/odd 奇数个子元素 

        :hover 鼠标移入
        :active 鼠标点击
        6.伪元素选择器
        伪元素:表示页面中一些特殊的并不真实存在的元素(特殊位置)
        ::first-letter 第一个字母
        ::first-line 第一行

        
        ::before 元素开头
        ::after 元素结尾
        before和after通过 content来设置里面内容
        7.属性选择器    
        [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
        [attr=^val]：该选择器仅选择 attr 属性被赋值以val开头的所有元素。
        [attr=$val]：该选择器仅选择 attr 属性被赋值以val结尾的所有元素。
        [attr=*val]：该选择器仅选择 attr 属性被赋值含有val的所有元素。



***********组合选择器***********1.第一步遍历所有标签 2.从右到左进行查找
        后代选择器/父子选择器/派生选择器——（空格键）div p(div下面所有p标签)——允许您选择嵌套在另一个元素中的某个元素（不一定是直接的后代;例如，它可以是一个孙子）。
        子选择器—— > div>p(div下面是直接子元素的p标签)——允许您选择一个元素，该元素是另一个元素的直接子元素。
        相邻兄弟选择器—— + ——允许您选择一个元素，它是另一个元素的直接兄弟元素(也就是说，在它的旁边，在层次结构的同一层)。
        通用兄弟选择器—— ~ — —允许您选择其他元素的兄弟元素(选择同级的元素)
        交集选择器—— 选择器1选择器2选择器 div.a#b(满足div并且类名为"a"id名为"b"的元素)——选中同时符合多个条件的元素
        分组选择器(并集选择器)—— 选择器1,选择器2,选择器 div,p,span(div和p和span元素都起作用)——选中多个选择器对应元素

**********css权重*******
        ！important      infinity 无穷
        行间样式          1000  256进制
        id选择器          100   256进制
        类|属性|伪类       10    256进制
        标签|伪元素        1    256进制
        通配符选择器        0
         */
      /* 父子选择器/派生选择器/后代选择器 */
      section p {
        color: blue;
      }
      /* 子选择器 */
      section > p {
        background-color: yellow;
      }
      /* 兄弟选择器 */
      h2 + p {
        text-transform: uppercase;
      }

      h2 ~ p {
        border: 1px dashed black;
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Heading 1</h2>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <div>
        <h2>Heading 2</h2>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
        <div><p>Paragraph 5</p></div>
      </div>
    </section>
  </body>
</html>
